<!-- <template> 标签包含组件的 HTML 模板 -->
<template>
    <!-- 组件的根元素，带有一个 "hello" 的 class -->
    <div class="hello">
        <!-- <h1> 标签显示一个大标题 -->
        <!-- {{ msg }} 是 Vue 的文本插值语法，也叫“Mustache”语法。 -->
        <!-- 它会显示组件实例中 `msg` property 的值。这个值是通过 props 从父组件 (App.vue) 传递过来的。 -->
        <h1>{{ msg }}</h1>

        <!-- 以下是静态内容，包含一些有用的链接 -->
        <p>
            For a guide and recipes on how to configure / customize this project,<br />
            check out the
            <!-- <a> 标签创建了一个超链接 -->
            <!-- href 指向 Vue CLI 的文档网站 -->
            <!-- target="_blank" 使链接在新标签页中打开 -->
            <!-- rel="noopener" 是一个安全措施，防止新打开的页面通过 window.opener 控制原始页面 -->
            <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
        </p>
        <h3>Installed CLI Plugins</h3>
        <ul>
            <li>
                <a
                    href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel"
                    target="_blank"
                    rel="noopener"
                    >babel</a
                >
            </li>
            <li>
                <a
                    href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint"
                    target="_blank"
                    rel="noopener"
                    >eslint</a
                >
            </li>
        </ul>
        <h3>Essential Links</h3>
        <ul>
            <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
            <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
            <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
            <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
            <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
        </ul>
        <h3>Ecosystem</h3>
        <ul>
            <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
            <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
            <li>
                <a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener"
                    >vue-devtools</a
                >
            </li>
            <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
            <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
        </ul>
    </div>
</template>

<!-- <script> 标签包含组件的 JavaScript 逻辑 -->
<script>
// 导出一个组件定义对象
export default {
    // 组件的名称
    name: "HelloWorld",
    // `props` 对象用于声明该组件可以接收的属性。
    props: {
        // 声明一个名为 `msg` 的 prop。
        // `String` 指定了这个 prop 的期望类型是字符串。
        // Vue 会对传递过来的 prop 类型进行校验（在开发模式下）。
        msg: String,
    },
};
</script>

<!-- "scoped" 属性是一个非常重要的特性。它告诉 Vue，这个 <style> 标签里的 CSS 规则
     将只应用于当前组件的元素。Vue 通过为组件的 DOM 元素添加一个唯一的 data 属性（如 data-v-f3f3eg9）
     并相应地修改 CSS 选择器（如 .hello -> .hello[data-v-f3f3eg9]）来实现这一点。
     这可以有效避免组件间的样式污染。 -->
<style scoped>
/* 为 <h3> 元素设置样式 */
h3 {
    /* 设置上下外边距为 40px，左右为 0 */
    margin: 40px 0 0;
}
/* 为 <ul> (无序列表) 元素设置样式 */
ul {
    /* 移除列表项前方的默认项目符号（如圆点） */
    list-style-type: none;
    /* 移除列表的内边距 */
    padding: 0;
}
/* 为 <li> (列表项) 元素设置样式 */
li {
    /* 将列表项显示为行内块级元素，使它们可以在一行内排列，同时可以设置宽高和边距 */
    display: inline-block;
    /* 设置左右外边距为 10px，使列表项之间有间距 */
    margin: 0 10px;
}
/* 为 <a> (链接) 元素设置样式 */
a {
    /* 设置链接的文本颜色 */
    color: #42b983;
}
</style>
